import { Navigate , useRoutes} from 'react-router-dom' //Navigate重定向 useRoutes解析路由表

import Login from '../components/Login'
import Main from '../components/Main'
import NotFound from '../components/NotFound/'
import Home from '../components/Main/Home'
import About from '../components/Main/About'

//配置路由表
const routes = [
    {
        path:"/login",
        element: <Login/>
    },
    {
        path:"/main",
        element: <Main/>,
        children: [
            {
              path: "/main/home",
              element: <Home />
            },
            {
              path: "/main/about",
              element: <About />
            }
        ]
        
    },
    {
        path:"/",
        element: <Navigate to = "/login"/>
    },
    {
        path:"*",
        element: <NotFound/>
    }
]


//这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构
export const GetUseRoutes = () => {
    //在函数组件中是可以使用hook
    return useRoutes(routes)
}

//自定义hooks
export const useMayRoutes = () => {
    //在自定义hooks中是可以使用hook
    return useRoutes(routes)
}

